<template>
    <div>
        <div class="noBadgeButton" v-if="!propJson.isAddBadge">
            <el-button
                :type="propJson.type"
                :plain="propJson.plain"
                :round="propJson.round"
                :size="propJson.size"
                :icon="propJson.iconBefore"
                v-if="!propJson.circle"
                @click="buttonClick"
                :loading="buttonClickLoading"
                :color="propJson.isCustomColor ? propJson.customColor : ''"
                style="width: 100%"
            >
                {{propJson.buttonName}}
                <el-icon class="el-icon--right" v-if="propJson.iconAfter !== ''">
                    <component :is="propJson.iconAfter" />
                </el-icon>
            </el-button>

            <el-button
                :type="propJson.type"
                :plain="propJson.plain"
                :round="propJson.round"
                :size="propJson.size"
                :icon="propJson.iconOnly"
                :circle="true"
                v-if="propJson.circle"
                @click="buttonClick"
                :loading="buttonClickLoading"
            >
            </el-button>
        </div>

        <div class="addBadgeButton" v-if="propJson.isAddBadge" :info="getBadgeValue">
            <el-badge :value="badgeValue" :is-dot="propJson.badgeIsBot" :max="propJson.badgeMaxNum"
                      v-if="!propJson.circle" style="width: 98%" :type="propJson.badgeType">
                <el-button
                    :type="propJson.type"
                    :plain="propJson.plain"
                    :round="propJson.round"
                    :size="propJson.size"
                    :icon="propJson.iconBefore"
                    v-if="!propJson.circle"
                    @click="buttonClick"
                    :loading="buttonClickLoading"
                    :color="propJson.isCustomColor ? propJson.customColor : ''"
                    style="width: 100%"
                >
                    {{propJson.buttonName}}
                    <el-icon class="el-icon--right" v-if="propJson.iconAfter !== ''">
                        <component :is="propJson.iconAfter" />
                    </el-icon>
                </el-button>
            </el-badge>

            <el-badge :value="badgeValue" :is-dot="propJson.badgeIsBot" :max="propJson.badgeMaxNum"
                      v-if="propJson.circle" style="width: 100%" :type="propJson.badgeType">
                <el-button
                    :type="propJson.type"
                    :plain="propJson.plain"
                    :round="propJson.round"
                    :size="propJson.size"
                    :icon="propJson.iconOnly"
                    :circle="true"
                    v-if="propJson.circle"
                    @click="buttonClick"
                    :loading="buttonClickLoading"
                >
                </el-button>
            </el-badge>
        </div>

    </div>
</template>

<script>
import {doThirdServiceAction, doThirdServiceValue} from "@/request/lowcode/thirdService";
import {ElNotification} from "element-plus";

export default {
    name: "ButtonComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            selfCommonParam: "",
            buttonClickLoading: false,
            badgeValue: "new"
        }
    },
    methods: {
        execThen(execParam) {
            if (execParam.isLoading) {
                this.buttonClickLoading = false
            }

            if (this.propJson.isAddMessage) {
                ElNotification({
                    title: '执行成功',
                    message: "Success",
                    type: 'success',
                })
            }
        },
        execCatch(execParam) {
            if (execParam.isLoading) {
                this.buttonClickLoading = false
            }
        },
        async buttonClick() {
            // 编辑模式不触发点击事件
            if (this.propJson.editFlag) {
                return
            }

            if (this.propJson.isLoading) {
                this.buttonClickLoading = true
            }
            // 定义一个标志位，后续同步执行
            let awaitObj = {flag: false, res: true}
            await doThirdServiceAction(this.propJson.clickAction, awaitObj, this.commonParam, this.execThen, this.execCatch, this.propJson);
        },
        execBadgeValueThen(resValue) {
            this.badgeValue = parseInt(resValue)
        },
        execBadgeValueCatch(resValue) {

        }
    },
    computed: {
        async getBadgeValue() {
            if (this.propJson.editFlag) {
                return;
            }
            await doThirdServiceValue(this.propJson.badgeValue, this.commonParam, this.execBadgeValueThen, this.execBadgeValueCatch, null)
        }
    },
    mounted() {
        this.selfCommonParam = this.commonParam
    }
}
</script>

<style scoped lang="less">

</style>